<template>
	<div class="lx-container">
		<el-form ref="queryParams" :model="queryParams" :inline="true" class="query-bar">
			<div class="query-row demo-form-inline">
				<div>
					<el-form-item>
						<el-button type="primary" @click="insertNewsCategorys">添加类别</el-button>
					</el-form-item>
				</div>
				<div>
					<el-form-item label="类别名称">
						<el-input maxlength="30" v-model="queryParams.newsCategoryName" placeholder="请输入"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button @click="query">查询</el-button>
					</el-form-item>
				</div>
			</div>
		</el-form>
		<div class="lx-table">
			<lx-table ref="myTable" :tableData="newsTypeList" :tableCols="tableCols" isSelection isIndex :currentPage="queryParams.pageNum"
			 :total="queryParams.total" :pageSize="queryParams.pageSize" @sizeChange="sizeChange" @currentChange="currentChange" @batchDel="batchDel" >
			</lx-table>
		</div>
		<el-dialog :title="editFormTitle" :visible.sync="editFormVisible" width="508px">
			<el-form :model="editForm" :rules="editRules" ref="editForm" label-width="100px">
				<el-form-item  label="类别" prop="newsCategoryName">
					<el-input maxlength="30" v-model="editForm.newsCategoryName"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="closeEditForm">取 消</el-button>
				<el-button type="primary" @click="submitEditForm">确 定</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	import LxTable from "@/components/LxTable.vue";
	export default {
		components: {
			"lx-table": LxTable
		},
		async mounted() {
			this.selectNewsCategorys();
		},
		data() {
			return {
				queryParams: {
					newsCategoryName: "",
					pageSize: 10,
					pageNum: 1,
					total: 0
				},
				tableCols: [{
						label: '类别名称',
						prop: 'newsCategoryName',
						align:"center",
					},
					{
						label: '操作',
						type: 'Button',
						btnList: [{
								type: 'text',
								label: '编辑',
								handle: (that, row) => this.edit(that, row)
							},
							{
								type: 'text',
								label: '删除',
								handle: (that, row) => this.del(that, row)
							},
						],
						width: 250,
						align:"center"
					}
				],
				newsTypeList: [],
				editFormVisible: false,
				editFormTitle: "添加类别",
				editForm: {
					id: null,
					newsCategoryName: "",
					yn:1
				},
				editRules: {
					newsCategoryName: [{
						required: true,
						message: '请输入类别名称',
						trigger: 'blur'
					}]
				}
			}
		},
		computed: {
		},
		methods: {
			currentChange(val) {
				this.queryParams.pageNum = val;
				this.selectNewsCategorys();
			},
			sizeChange(val){
				this.queryParams.pageSize = val;
				this.query();
			},
			query() {
				this.queryParams.pageNum = 1;
				this.selectNewsCategorys();
			},
			async selectNewsCategorys() {
				let _this = this;
				let ret = await _this.$api.selectNewsCategorys(this.queryParams);
				if (ret) {
					_this.newsTypeList = ret.list;
					_this.queryParams.total = ret.total;
				}
			},
			insertNewsCategorys() {
				this.editFormTitle = "添加类别";
				this.editForm = {
					id: null,
					newsCategoryName: "",
					yn:1
				}
				this.editFormVisible = true;
			},
			edit(t, row) {
				this.editFormTitle = "编辑类别";
				this.editForm = {
					id: row.id,
					newsCategoryName: row.newsCategoryName,
					yn:row.yn
				}
				this.editFormVisible = true;
			},
			closeEditForm() {
				this.editForm = {
					id: null,
					newsCategoryName: "",
					yn:1
				}
				this.editFormVisible = false;
			},
			submitEditForm() {
				let _this = this;
				_this.$refs.editForm.validate(async (valid) => {
					let editForm = _this.editForm;
					if (valid) {
						let ret;
						let t = "";
						if(editForm.id){
							t = "修改";
							ret = await _this.$api.updateNewsCategorys(editForm);
						}else{
							t = "添加";
							ret = await _this.$api.insertNewsCategorys(editForm);
						}
						if(ret){
							_this.$message.success(t+"成功");
							_this.selectNewsCategorys();
						}
						_this.closeEditForm();
					} else {
						return false;
					}
				});
			},
			del(t, row) {
				let _this = this;
				_this.$confirm('确定要删除当前数据吗?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(async () => {
					let ret = await _this.$api.deleNewsCategorys(row.id);
					if (ret) {
						_this.$message.success("删除成功");
						let queryParams = _this.queryParams;
						if (queryParams.pageNum > 1 && queryParams.total - (queryParams.pageNum - 1) * queryParams.pageSize ==
							1) {
							_this.queryParams.pageNum--;
						}
					}
					_this.$refs.myTable.clearSelect();
					_this.selectNewsCategorys();
				}).catch(() => {

				})
			},
			async batchDel(ids) {
				let _this = this;
				let ret = await _this.$api.deleNewsCategorys(ids);
				if (ret) {
					_this.$message.success("删除成功");
					_this.$refs.myTable.clearSelect();
					_this.query();
				}
				return ret;
			},
		}
	}
</script>

<style lang="scss" scoped="scoped">
	.lx-container {
		padding: 32px 24px;
		@include flex-column(flex-start, flex-start);

		// box-sizing: border-box;
		.lx-table {
			width: 100%;
		}
	}
</style>
